<template>
  <!-- 全局底部导航组件 -->
  <van-tabbar v-model="active" route>
    <van-tabbar-item to="/" icon="home-o">
      首页
    </van-tabbar-item>
    <van-tabbar-item to="/category" icon="apps-o">
      分类
    </van-tabbar-item>
    <van-tabbar-item to="/recommend" icon="good-job-o">
      推荐
    </van-tabbar-item>
    <van-tabbar-item to="/cart" icon="cart-o">
      购物车
    </van-tabbar-item>
    <van-tabbar-item to="/user" icon="user-o">
      我的
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
// ------------------------------ 导入模块 ------------------------------
// 导入 vue3 的 API
import { ref } from 'vue'

// 导入 vant 组件，按需引入
import {
  Tabbar as VanTabbar,
  TabbarItem as VanTabbarItem
} from 'vant'

// ------------------------------ 声明数据 ------------------------------
// 活跃的导航区域展示
const active = ref(0)
</script>

<style lang="scss" scoped>
// 给 van-tabbar 组件增加 fixed 样式的权重
.van-tabbar {
  position: fixed !important;
}
</style>
